<template>
	<view class="">
		<cs v-if="ver"></cs>

		<scroll-view :enable-flex="true" :show-scrollbar="false" @scrolltolower="lower" :scroll-y="true" style="width: 100%; " v-else>
			<view class="" style="width: 100%; height: 100rpx; background-color: #007AFF; align-items: 100rpx; display: none;">
				<view class="toop" style="display: flex; align-items: center;">
					<view class="toop_a" @click="jumpp">
						<image src="../../static/shoshu.png" mode="" style="width: 32rpx;height: 32rpx;margin-left: 40rpx;margin-top: -5rpx;"></image>
						<input type="text" placeholder="请输入科目、教练" v-model="sho_shu" style="" disabled />
					</view>
				</view>
			</view>

			<!-- 轮播图 -->

			<view style="width: 100vw; display: flex; justify-content: center;">
				<swiper class="wrap" :indicator-dots="true" circular :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in lunbo_tu" :key="index" @click="jump(item.artcal_id, item.cat_id)">
						<image mode="aspectFill" :src="item.url" style="width: 702rpx;height: 300rpx; border-radius:10rpx ;"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 二级图标 -->
			<view class="erji_tubiao">
				<view class="xiang_qing" v-for="(item, index) in subjectList" :key="index" @click="gotoSubjectContext(item)">
					<image :src="item.img" mode="aspectFill" style="width: 72rpx;height: 72rpx;"></image>
					<p style="height: 35rpx;line-height: 35rpx;text-align: center; white-space: normal;">{{ item.name }}</p>
				</view>
			</view>

			<view style="width: 100%;height: 20rpx;background-color: #FFFFFF;"></view>
			<!-- start  2021-02-21 21:07:20  -->

			<view class="invite" v-if="url" @click="jump(url.artcal_id, url.cat_id)"><image :src="url.url" mode="aspectFill"></image></view>

			<view class="boutique">
				<text style="display: block; margin-bottom: 30rpx;">
					<text class="cuIcon-playfill margin-right-xs anni1" style="color: #3187fb;"></text>
					企业宣传视频
				</text>
				<video :src="src" loop :danmu-list="danmuList" :show-fullscreen-btn="false"></video>
				<!-- <yfsVideo :src="src" :danmu-list="danmuList" :videoTitle="videoTitle" style="margin-top: 30rpx;"  ></yfsVideo> -->
			</view>
			<view class="trn" v-if="siteData.length">
				<text class=" ">
					<text class="cuIcon-title "></text>
					训练场地
				</text>
				<view class="box">
					<block v-for="(item, index) in siteData" :key="index">
						<view class="one" @click="jump(item.article_id, 1)">
							<image :src="item.thumbnail" mode="aspectFill" style="width: 100%; height: 220rpx ; "></image>
							<text class="tt text-cut" style="width: 220rpx;">{{ item.post_title }}</text>
						</view>
					</block>
				</view>
			</view>
			<view class="boutique" v-if="activityUrl || activityUrll">
				<text class="cuIcon-title">精品活动</text>

				<view class="box">
					<view class="left" @click="jump(activityUrl[0].artcal_id, activityUrl[0].cat_id)">
						<image :src="activityUrl[0].url" mode="aspectFill" style="width: 334rpx; height: 200rpx; border-radius: 10rpx;"></image>
					</view>
					<view class="right" @click="jump(activityUrl[1].artcal_id, activityUrl[0].cat_id)">
						<image :src="activityUrl[1].url" mode="aspectFill" style="width: 334rpx; height: 200rpx; border-radius: 10rpx;"></image>
					</view>
				</view>
			</view>

			<view class="featured" v-if="pkgData">
				<text class="cuIcon-title">精选套餐</text>
				<view class="box">
					<view class="left" @click="jump(pkgData[0].artcal_id, pkgData[0].cat_id)"><image :src="pkgData[0].url" mode="aspectFill"></image></view>
					<view class="left1">
						<view class="bottom" @click="jump(pkgData[1].artcal_id, pkgData[1].cat_id)"><image :src="pkgData[1].url" mode="aspectFill"></image></view>
						<view class="bottom" @click="jump(pkgData[3].artcal_id, pkgData[3].cat_id)"><image :src="pkgData[3].url" mode="aspectFill"></image></view>
					</view>
				</view>
			</view>

			<view class="goldMedal" v-if="goldMedalData">
				<text class="cuIcon-title">金牌教练</text>
				<view class="box">
					<ls-swiper :list="goldMedalData" previousMargin="70" nextMargin="100" height="130" imgRadius="5">
						<template v-slot="{ data }">
							<!-- <image src="" mode="aspectFill" style="width: 95%; border-radius: 5rpx; background-color: #f5f5f5;"></image> -->

							<view
								@click="jump_p(data.id)"
								class=""
								style="display: flex; justify-content: space-around;width: 95%; border-radius: 5rpx; background-color: #f5f5f5; height: 230rpx; align-items: center;"
							>
								<image
									:src="data.thumbnail"
									mode="aspectFill"
									style="width: 170rpx; height: 170rpx ; border-radius: 10rpx;"
									@click.stop="preview(data.thumbnail)"
								></image>
								<view class="" style="display: flex; flex-direction: column; justify-content: space-around; font-size: 28rpx;">
									<text>教练姓名：{{ data.post_title }}</text>
									<text>教练驾校：{{ data.driver_school }}</text>
									<text class="text-cut" style=" width: 288rpx; display: block;">职务：{{ data.zhiwu ? data.zhiwu : '无' }}</text>
								</view>
							</view>
						</template>
					</ls-swiper>
				</view>
			</view>

			<!-- end  2021-02-21 21:07:20 -->
			<view class="tui_jian" style="margin-top: 20rpx;">
				<view :class="ren == 2 ? 'tui_jian_a' : 'tui_jian_b'" @click="ren_men_b">驾校指南</view>
				<view :class="ren == 1 ? 'tui_jian_a' : 'tui_jian_b'" @click="ren_men_a">热门文章</view>
			</view>

			<!-- 热门文章 -->
			<view class="remen_wezhang" v-if="ren == 1" v-for="(item, index) in remenwenzhangList" :key="index" @click="goWenzhangxiangqingPage(item.article_id)">
				<view class="remen_wezhang_top">{{ item.post_title }}</view>
				<view class="remen_wezhang_cen"><image mode="aspectFill" :src="item.thumbnail" style="width: 100%;height: 300rpx;"></image></view>
				<view class="remen_wezhang_bott">
					<view style="">{{ item.published_time }}</view>
					<view style="margin-right: 40rpx;display: flex;">
						<image src="../../static/liulan.png" style="width: 22rpx;height: 22rpx;margin-top: 5rpx;margin-right: 8rpx;"></image>
						<p style="margin-top: 3rpx;">{{ item.post_hits }}</p>
					</view>
				</view>
			</view>
			<!-- 驾校指南 -->
			<view class="remen_jiaolian" v-if="ren == 2" v-for="(item, index) in jiaxiaozhinanList" :key="index" @click="goWenzhangxiangqingPage(item.article_id)">
				<view class="remen_jiaolian_qian">
					<p
						style="width: 100%;height: 120rpx;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;text-overflow: ellipsis;display: -webkit-box;"
					>
						{{ item.post_title }}
					</p>
					<view style="width: 100%;height: 26px;display: flex;justify-content: space-between;align-items: center; ">
						<p style="font-size: 22rpx;color: #666666;">{{ item.published_time }}</p>
					</view>
				</view>
				<view class="remen_jiaolian_hou"><image :src="item.thumbnail" class="r" style="width: 220rpx;height: 160rpx;" @click.stop="preview(item.thumbnail)"></image></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import helper from '../../common/helper.js';
import cs from '../../components/cs/cs.vue';
import yfsVideo from '@/components/yfs-video/yfs-video.vue';
import lsSwiper from '../../components/ls-swiper/index.vue';
export default {
	components: {
		lsSwiper,
		yfsVideo,
		cs,
	},
	data() {
		return {
			ver: false,
			src: '',

			danmuList: [
				{
					text: '创造中国驾驶员培训一流品牌企业',
					// color: '#3187fb',
					time: 1,
				},
				{
					text: '有车的地方就有路正驾校',
					// color: '#3187fb',
					time: 3,
				},
				{
					text: '技术赢得生存，服务开创未来',
					// color: '#3187fb',
					time: 5,
				},
				{
					text: '学员满意是路正的最高标准',
					// color: '#3187fb',
					time: 7,
				},
				{
					text: '一切以顾客的价值为哦根本',
					// color: '#3187fb',
					time: 9,
				},
			],
			videoCurrTime: 0,
			videoTitle: 'zhemvopswemvop    wjfopjeowjmpiojm',

			sho_shu: '',
			ren: 2,
			// 轮播图
			lunbo_tu: [],
			list1: [],

			// 二级图标
			/**
			 * id	科目id
			 * name	科目名称
			 * img	科目icon
			 * child	子类目
			 * child - id	科目id
			 * child - name	科目名称
			 */
			subjectList: [],
			// 用于保存文章分类
			remenwenzhangId: 1,
			jiaxiaozhinanId: 26,
			remenwenzhangPage: 1, //热门文章当前所在页
			jiaxiaozhinanPage: 1, //驾校指南当前所在页
			/**
			 * 热门文章
			 * cate_id: '', //分类ID
			 * cate_name: '', //分类名称
			 * article_id: '', //文章ID
			 * post_title: '', //标题
			 * post_excerpt: '', //简介
			 * post_source: '', //发布人
			 * thumbnail: '' //缩略图
			 * post_hits:''	//查看数量
			 * published_time	发布时间
			 */
			remenwenzhangList: [],
			/**
			 * 驾校指南
			 * cate_id: '', //分类ID
			 * cate_name: '', //分类名称
			 * article_id: '', //文章ID
			 * post_title: '', //标题
			 * post_excerpt: '', //简介
			 * post_source: '', //发布人
			 * thumbnail: '' //缩略图
			 * post_hits:''	//查看数量
			 * published_time	发布时间
			 */
			jiaxiaozhinanList: [],
			url: '',
			activityUrl: '',
			activityUrll: '',
			siteData: [],
			pkgData: [],
			goldMedalData: [],
			//http: 'https://jiaxiao.qianjitianxia.com/upload/',
			list: ['寒雨连江夜入吴', '平明送客楚山孤', '洛阳亲友如相问', '一片冰心在玉壶'],
		};
	},
	created() {
		uni.hideTabBar();
		this.name();
	},

	onLoad(options) {
		this.masterFlg(); // 总开关
		//获取轮播图
		this.getBannerList();
		this.getAds();
		this.getAdss();
		this.getAdsss();
		this.trn();
		this.goldMedal();

		//为了方便管理，把这两个分类的固定ID写在全局参数里面，免得以后ID变了，要来每个页面改，这样只需改全局参数helper里面就行了;
		this.remenwenzhangId = helper.remenwenzhangId;
		this.jiaxiaozhinanId = helper.jiaxiaozhinanId;
		//初始化文章数据
		this.getArtuckeData(this.jiaxiaozhinanPage, this.jiaxiaozhinanId, 0);
		this.getArtuckeData(this.remenwenzhangPage, this.remenwenzhangId, 0);
		//初始化金刚区数据
		this.getSubjectList();
	},
	methods: {
		name() {
			uni.request({
				url: 'https://jiaxiao.qianjitianxia.com/api/Home/sh',
				method: 'GET',
				data: {},
				success: res => {
					this.ver = false;
					uni.showTabBar();
				},
				fail: () => {
					this.ver = true;
				},
				complete: () => {},
			});
		},

		async preview(urls) {
			uni.previewImage({
				urls: [urls],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
					},
					fail: function(err) {
					},
				},
			});
		},
		// 总开关

		async masterFlg() {
			let res;
			try {
				res = await this.$request.get('api/Home/sh', {});

				this.src = res.data.data;
			} catch (e) {}
		},

		async bind(agentid) {
			let res;
			try {
				res = await this.$request.get('api/User/user_relation', {
					data: {
						agentid: agentid,
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}

			if (res.data.data.url) {
				this.url = res.data.data;
			}
		},

		jumpp() {
			this.$Router.push({
				name: 'HM-search',
				params: {
					//id: id,
				},
			});
		},

		jump_p(id) {
			this.$Router.push({
				name: 'jiaolianxiangqing',
				params: {
					id: id,
				},
			});
		},
		jump(artcal_id, cat_id) {
			if (cat_id == 1) {
				this.$Router.push({
					name: 'wenzhangxiangqing',
					params: {
						articleId: artcal_id,
					},
				});
			} else {
				uni.navigateTo({
					url: 'richTxt?artcal_id=' + artcal_id,
				});
			}
		},
		//获取广告
		async getAds() {
			let res;
			try {
				res = await this.$request.get('api/home/index/guanggao', {
					data: {
						type: 1,
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}

			if (res.data.data.url) {
				this.url = res.data.data;
			}
		},
		// 活动
		async getAdss() {
			let res;
			try {
				res = await this.$request.get('api/home/index/guanggao', {
					data: {
						type: 2,
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}

			if (res.data.data) {
				this.activityUrl = res.data.data;
			}
		},
		//  训练场地
		async trn() {
			let res;
			try {
				res = await this.$request.get('api/Home/info_list', {
					data: {
						cate_id: 28,
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}

			if (res.data.data) {
				this.siteData = res.data.data;
			}
		},
		//套餐
		async getAdsss() {
			let res;
			try {
				res = await this.$request.get('api/home/index/guanggao', {
					data: {
						type: 3,
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}

			if (res.data.data) {
				this.pkgData = res.data.data;
			}
		},

		//金牌
		async goldMedal() {
			let res;
			try {
				res = await this.$request.get('api/Home/index/jinpai_teachtor_list', {
					data: {
						//type: 3,
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}

			if (res.data.data) {
				this.goldMedalData = res.data.data;
			}
		},

		lower() {
			this.jiaxiaozhinanPage += 1;
			this.remenwenzhangPage += 1;
			//一次性获取两个列表的文章数据，并追加进去。之所以不单独拿，是因为原来的傻逼HTML样式写法导致要单独拿就会改动很大。将就用了
			this.getArtuckeData(this.jiaxiaozhinanPage, this.jiaxiaozhinanId, 1);
			this.getArtuckeData(this.remenwenzhangPage, this.remenwenzhangId, 1);
		},
		ren_men_a() {
			this.ren = 1;
		},
		ren_men_b() {
			this.ren = 2;
		},
		// 跳转科目介绍页面
		gotoSubjectContext(item) {
			this.$Router.push({
				name: 'kemuxiangqing',
				params: {
					child: item,
				},
			});
		},
		// 获取文章列表
		async getArtuckeData(page, cateId, style) {
			if (style == 0) this.page = 1;
			let res;
			try {
				res = await this.$request.get('api/Home/info_list', {
					data: {
						cate_id: cateId,
						page: page,
						pagesize: 10,
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}

			if (res.data.code == 1) {
				//获取成功,根据ID来把对应的数据追加到数组
				if (cateId == 1) {
					if (style == 0) {
						this.remenwenzhangList = res.data.data;
					} else {
						if (res.data.data != '') this.remenwenzhangList = this.remenwenzhangList.concat(res.data.data);
					}
				} else if (cateId == 26) {
					if (style == 0) {
						this.jiaxiaozhinanList = res.data.data;
					} else {
						if (res.data.data != '') this.jiaxiaozhinanList = this.jiaxiaozhinanList.concat(res.data.data);
					}
				}
			} else {
				//服务器返回码错误
			}
		},
		// 去文章详情
		goWenzhangxiangqingPage(articleId) {
			this.$Router.push({
				name: 'wenzhangxiangqing',
				params: {
					articleId: articleId,
				},
			});
		},
		//获取科目类别
		async getSubjectList() {
			let res;
			try {
				res = await this.$request.get('api/Home/subject_list');
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			this.subjectList = res.data.data.slice(0, 10);
		},

		//获取banner
		async getBannerList() {
			this.list1 = [
				{
					name: '1',
					image: 'https://picb.zhimg.com/80/v2-3f5c7bdcc228d3798a044b78023459d3_720w.jpg?source=1940ef5c',
				},
				{
					name: '2',
					image: 'https://pic3.zhimg.com/80/v2-1deed0eca463f87f36d6e88363ae2693_720w.jpg?source=1940ef5c',
				},
				{
					name: '3',
					image: 'https://picb.zhimg.com/80/v2-520f230f8cb8a0943b8582dcd77ec6ba_720w.jpg?source=1940ef5c',
				},
				{
					name: '4',
					image: 'https://pic1.zhimg.com/80/v2-33e85bdfafbb4aa52ce6f70f319dbb4f_720w.jpg?source=1940ef5c',
				},
			];
			let res;
			try {
				res = await this.$request.get('api/Home/index/lunbotu');
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			this.lunbo_tu = res.data.data;
		},
	},
};
</script>

<style lang="scss">
.anni1 {
	animation: anni 1s infinite;
	// animation-duration:'';
}

@keyframes anni {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.toop {
	width: 100%;
	height: 88rpx;
	background-color: #3187fb;

	.text-cut {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.toop_a {
		width: 700rpx;
		height: 60rpx;
		background-color: #ffffff;
		margin-left: 25rpx;
		padding-top: 15rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
	}

	input {
		width: 500rpx;
		height: 45rpx;
		border-left: 1rpx solid #cccccc;
		margin-left: 10rpx;
		padding-left: 10rpx;
		font-size: 30rpx;
		outline: none;
		line-height: 45rpx;
		margin-top: -10rpx;
	}
}

.wrap {
	width: 700rpx;
	margin-top: 20rpx;
	height: 280rpx;
}

.erji_tubiao {
	width: 750rpx;
	//height: 280rpx;
	margin-top: 27rpx;
	display: flex;
	flex-wrap: wrap;

	.xiang_qing {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 150rpx;
		height: 140rpx;
		//margin-right: 50rpx;
		//margin-left: 55rpx;
		// margin-bottom: 30rpx;
	}
}
// start  ------------------------2021-02-21 21:07:20
.invite {
	width: 702rpx;
	height: 160rpx;
	margin: 30rpx auto;
	//background: ;
	image {
		width: 100%;
		height: 100%;
	}
}
.boutique {
	width: 702rpx;
	margin: 30rpx auto;
	text {
		font-size: 32rpx;
		//font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.box {
		display: flex;
		justify-content: space-between;

		.left,
		.right {
			margin-top: 30rpx;
			border-radius: 10rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 334rpx;
			height: 200rpx;

			.t1 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.t2 {
				margin: 22rpx 0 27rpx 0;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.t3 {
				display: flex;
				justify-content: center;
				align-items: center;

				width: 120rpx;
				height: 40rpx;
				background: #f09b4f;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fefefe;
			}
			.t4 {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 27rpx;
				right: 0;
				width: 116rpx;
				height: 36rpx;
				background: #ffbc3c;
				border-radius: 18rpx 0rpx 0rpx 18rpx;

				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
}

.trn {
	width: 702rpx;
	margin: 0 auto;
	margin-top: 30rpx;

	text {
		font-size: 32rpx;
		//font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.box {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		padding-top: 30rpx;
		.one {
			width: 220rpx;
			//margin-right: 20rpx;

			image {
				border-radius: 10rpx;
			}
			.tt {
				width: 200rpx;

				display: block;
				margin-top: 30rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				white-space: nowrap;
				margin-bottom: 20rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
}

.featured {
	width: 702rpx;
	margin: 0 auto;

	text {
		font-size: 32rpx;
		//font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.box {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		.left {
			border-radius: 10rpx;
			width: 228rpx;
			height: 400rpx;
			//padding: 40rpx 0 0 20rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
			text {
				display: block;
			}
			.tt1,
			.tt3 {
				color: #ffffff;
				font-size: 28rpx;
			}
			.tt2 {
				color: #ffffff;
				font-size: 24rpx;
				margin: 19rpx 0;
			}
		}
		.left1 {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 445rpx;
			height: 400rpx;
			.bottom {
				display: flex;
				flex-direction: column;
				justify-content: center;

				width: 100%;
				height: 190rpx;

				border-radius: 10rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
				text {
					display: block;
				}
				.tt1,
				.tt3 {
					color: #ffffff;
					font-size: 28rpx;
				}
				.tt2 {
					color: #ffffff;
					font-size: 24rpx;
					margin: 19rpx 0;
				}
			}
		}
	}
}

.goldMedal {
	width: 702rpx;
	margin: 30px auto;
	margin-bottom: 0;

	text {
		font-size: 32rpx;
		//font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.box {
		padding-top: 39rpx;
		.inside {
			image {
				width: 170rpx;
				height: 170rpx;
				border-radius: 10rpx;
				background-color: #333333;
			}
		}
	}
}
// end  ------------------------2021-02-21 21:07:20
.tui_jian {
	width: 100%;
	height: 90rpx;
	// border-bottom: 1rpx solid #f0f2f5;
	display: flex;
	justify-content: space-evenly;

	.tui_jian_a {
		width: 130rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		color: #3187fb;
		border-bottom: 6rpx solid #3187fb;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;

		font-weight: bold;
	}

	.tui_jian_b {
		width: 130rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
	}
}

.remen_wezhang {
	width: 730rpx;
	margin: 0 auto;
	border-bottom: 1rpx solid #f0f0f0;

	.remen_wezhang_top {
		width: 100%;
		line-height: 70rpx;
		padding-left: 10rpx;
		font-weight: 800;
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.remen_wezhang_cen {
		width: 730rpx;
		margin: auto;
		display: flex;
	}

	.remen_wezhang_bott {
		width: 730rpx;
		height: 50rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 18rpx;
		color: #666666;
	}
}

.remen_jiaolian {
	width: 100%;
	height: 220rpx;
	border-bottom: 1rpx solid #f0f2f5;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.remen_jiaolian_qian {
		width: 450rpx;
		height: 180rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
	}

	.remen_jiaolian_hou {
		width: 220rpx;
		height: 160rpx;
		margin-right: 30rpx;
	}
}
</style>
